<template>
  <!-- 预约详情 -->
  <page-loading :show="showPage">
  <view class="container">
    <view class="stopcolor flex flex-jc-sb flex-jc-c flex-ai-c">
      <view class="zhantai">
        {{madappStatus}}
      </view>
      <view class="timecss" v-show="madAppList.leftTime===null?false:true">
        到店剩余时间：<text>{{madAppList.leftTime}}</text>
      </view>
    </view>
    <view class="dianpuxx">
      <view class="shopcss">
        <view class="shopicon flex flex-ai-c" @click="onStore(madAppList.storeId)">
          <i-icon class="iconscs" icon="icondianpu" type="single" size="32rpx" color="#FBD220"></i-icon>
          <view style="margin-right: 10rpx;">7迈养车万达店</view>
          <view style="margin-top: 5rpx;">
						<i-icon class="iconscs" icon="iconbao_1" type="single" size="32rpx" color="#FBD220"></i-icon>
					</view>
					
          <u-icon class="iconscs" name="arrow-right" color="#999999" size="24rpx"></u-icon>
        </view>
        <view class="carbox flex flex-ai-c">
          <view class="carhead flex flex-ai-c">
            <image :src="madAppList.brandUrl"></image>车型：
          </view>
          <view class="carbody">
           {{madAppList.name}}
          </view>
        </view>
        <view class="carbox flex" v-show="judgeColor">
          <view class="carhead">
            外观内饰：
          </view>
          <view class="carbody">
            <view class="kuang2">
              <view class="colorboxsss">
                <view class="white" :style="{background:xedColorList.outerColour.colorCoding}"></view>
                <view class="kuangtext">
                  外观 <!-- {{xedColorList.outerColour.color}} -->
                </view>
              </view>
              /
              <view class="colorboxsss">
                <view class="kuangtext">
                  内饰 <!-- {{xedColorList.inColour.color}} -->
                </view>
                <view class="kuang21" v-if="xedColorList.inColour.neiColor.length === 1">
                  <view class="white1" :style="{background:xedColorList.inColour.colorCoding}"></view>
                </view>
                <view class="kuangdoubu" v-if="xedColorList.inColour.neiColor.length === 2">
                  <view class="white4" style="border-radius: 10rpx 10rpx 0rpx 0rpx;" :style="{background:xedColorList.inColour.neiColor[0]}"></view>
                  <view class="white4" style="border-radius: 0rpx 0rpx 10rpx 10rpx;" :style="{background:xedColorList.inColour.neiColor[1]}"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="carbox flex">
          <view class="carhead">
            到店时间：
          </view>
          <view class="carbody" v-if="madAppList.bookTime===''?false:true">
            {{madAppList.bookTime}}
          </view>
          <view class="carbody" v-else>
            暂无
          </view>
        </view>
        <view style="border-bottom: 1px solid #EEEEEE; margin: 0rpx 26rpx;"></view>
        <view class="btncss flex flex-jc-fe">
          <view class="imcss" @click="imclick(madAppList)">
            <i-icon class="iconfankui" icon="icondianpu" type="single" size="32rpx" color="#333333"></i-icon>
            在线咨询
          </view>
          <view class="imcss" @click="mobileclick(madAppList.storePhone)">
            <i-icon class="icondianhua" icon="icondianpu" type="single" size="32rpx" color="#333333"></i-icon>
            致电门店
          </view>
        </view>
      </view>
      <view class="titleord">
        预约订单信息
      </view>
      <view class="ordlist">
        <view class="carbox flex flex-ai-c">
          <view class="carhead">
            预约号：
          </view>
          <view class="carbody flex flex-ai-c">
            <text>{{madAppList.notifyNum}}</text>
						<view class="copyss" @click="copyClick(madAppList.notifyNum)">
						  复制
						</view>
          </view>
          
        </view>
        <view class="carbox flex flex-ai-c">
          <view class="carhead">
            预约发起时间：
          </view>
          <view class="carbody">
            {{madAppList.addTime}}
          </view>
        </view>
        <view class="carbox flex flex-ai-c" v-if="madAppList.arriveUserName===null?false:true">
          <view class="carhead">
            接待人员：
          </view>
          <view class="carbody">
            {{madAppList.arriveUserName}}
          </view>
          <view class="carbox flex flex-ai-c" v-if="madAppList.arriveTime===''?false:true">
            <view class="carhead">
              到店时间：
            </view>
            <view class="carbody">
              {{madAppList.arriveTime}}
            </view>
          </view>
        </view>
        <view class="carbox flex flex-ai-c" v-if="madAppList.cancelTime===''?false:true">
          <view class="carhead">
            取消时间：
          </view>
          <view class="carbody">
            {{madAppList.cancelTime}}
          </view>
        </view>
      </view>
      <view class="brnzhd flex flex-ai-c flex-jc-c">
        <view class="imcsss flex flex-jc-c flex-ai-c" @click="imclick(madAppList)">
          <i-icon class="iconscss" icon="iconxiaoxi" type="single" size="38rpx" color="#FFE23E"></i-icon>
          在线咨询
        </view>
        <view class="mobile" @click="mobileclick(madAppList.storePhone)">
          <i-icon class="iconscss" icon="icondianhua" type="single" size="32rpx" color="#333333"></i-icon>
          致电我们
        </view>
      </view>
    </view>
  </view>
  </page-loading>
</template>

<script src="./makeAppointment.js"></script>
<style scoped lang="scss">
  @import './makeAppointment.scss';
</style>
